<template>
  <NuxtLayout>
    <div class="app-home-hero">
      <div class="container flex">
        <div class="main">
          <p class="text">vue管理平台集中地</p>
          <p class="tagline">提交入口</p>
          <div class="actions">
            <el-space :size="20">
              <nuxt-link v-for="(item, index) in TopList" :key="index" :class="item.class" class="el-button el-button--default is-round" target="_blank" :to="`/post/edit?nav_id=${item.value}`">{{ item.title }}</nuxt-link>
            </el-space>
          </div>
        </div>
        <div class="image">
          <div class="image-container">
            <div class="image-bg" />
            <img width="350" class="VPImage image-src" src="/images/vue-banner.png" alt="vue-admin" />
          </div>
        </div>
      </div>
    </div>
    <div class="app-home-body">
      <div class="container relative">
        <Loading :show="loading" />
        <div class="app-home-body-item app-home-admin relative">
          <HomeBodyItem :data="state.list" />
        </div>
        <div class="app-home-body-item app-hooks-admin mt-3 mb-3">
          <el-row :gutter="30">
            <el-col :lg="12" :xs="24" :sm="8">
              <HomeBodyTitle :data="state.meta.ui" />
              <HomeBodyPart :data="state.list.uiList" />
            </el-col>
            <el-col :lg="12" :xs="24" :sm="8">
              <HomeBodyTitle :data="state.meta.hooks" />
              <HomeBodyPart :data="state.list.hooksList" />
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </NuxtLayout>
</template>
<script setup lang="ts">
import { set } from '@vueuse/core'
import { TopList } from '@/config'

const state = reactive({
  meta: {
    ui: {
      title: 'UI组件库',
      url: '/ui',
    },
    hooks: {
      title: 'Hooks工具集',
      url: '/hooks',
    },
  },
  // 列表数据
  list: {
    adminList: [],
    uiList: [],
    hooksList: [],
  } as Record<string, Article.Detail[]>,
  // 查询对象
  queryParams: {
    version: 3,
    navId: 1,
    title: '',
    page: 1,
    limit: 4,
  } as Article.ArticleListParam,
})
const loading = ref(true)
// 获取列表
const getList = async (params: any) => {
  const { query, type } = params

  const arg = Object.assign(state.queryParams, query)
  const { data } = await useAsyncData(`use_ArticleData_${query.navId}`, () => useArticleData(arg))
  state.list[type] = data.value?.rows || []
  set(loading, false)
}

getList({ query: { navId: 1 }, type: 'adminList' })
getList({ query: { navId: 2, limit: 2 }, type: 'uiList' })
getList({ query: { navId: 3, limit: 2 }, type: 'hooksList' })
</script>
<style lang="scss"></style>
